<template>
  <el-dialog :title="'箱唛编辑'" :visible.sync="visible" append-to-body class="el-dialog-normal">
    <table
      cellspacing="0"
      width="100%"
      class="content"
      border="2"
      style="border-collapse:collapse;table-layout:fixed;font-size: 18px; width: 450px;margin:0 auto"
    >
      <tr>
        <td align="center">
          <div>
            <b v-if="!edit">{{ boxInfo.title }}</b>
            <el-input v-else type="text" v-model="boxInfo.title" :maxlength="8" show-word-limit style="padding: 10px 0;" />
          </div>
          <div>
            <b v-if="!edit">{{ boxInfo.desc }}</b>
            <el-input v-else type="text" v-model="boxInfo.desc" :maxlength="8" show-word-limit style="padding: 10px 0;" />
          </div>
        </td>
        <td align="center">
          <b style="font-size: 40px">1/99</b>
        </td>
      </tr>
      <tr>
        <td align="center" :colspan="2">
          <div style="font-weight: bold;font-size: 45px">BC00001</div>
        </td>
      </tr>
      <tr>
        <td align="center" :colspan="2">
          <VueBarcode :value="'BC00001'" :margin="5" :displayValue="false" height="50px" width="2px">输入条形码，自动生成</VueBarcode>
          <div v-if="!edit" style="font-size: 20px; font-weight: bold;">{{ boxInfo.mdcAra }}</div>
          <div v-else>
            <el-input type="text" v-model="boxInfo.mdcAra" style="width: 220px" maxlength="20" show-word-limit />
          </div>
          <div v-if="!edit" style="font-size: 20px; font-weight: bold;margin-bottom: 15px;">{{ boxInfo.mdcEn }}</div>
          <div v-else>
            <el-input type="text" v-model="boxInfo.mdcEn" style="width: 220px;padding: 10px 0;" maxlength="20" show-word-limit />
          </div>
        </td>
      </tr>
      <tr>
        <td align="center" :colspan="2">
          <b v-if="!edit" style="font-size: 56px">{{ boxInfo.ytm }}</b>
          <el-input v-else type="text" v-model="boxInfo.ytm" style="width: 220px;padding: 10px 0;" maxlength="10" show-word-limit />
        </td>
      </tr>
    </table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关 闭</el-button>
      <el-button @click="edit = !edit">{{ !edit ? '编 辑' : '预 览' }}</el-button>
      <el-button type="primary" @click="save">下一步</el-button>
    </span>
  </el-dialog>
</template>
<script>
import VueBarcode from 'vue-barcode'
export default {
  components: { VueBarcode },
  data() {
    return {
      boxInfo: {
        // title: '义特海外无忧',
        // desc: '沙特海运双清包税',
        // mdcAra: 'صنع في الصين',
        // mdcEn: 'MADE IN CHINA',
        // ytm: 'Y T M'
      },
      edit: false,
      visible: false
    }
  },
  methods: {
    open() {
      this.visible = true
      this.getLocalStorage()
    },
    save() {
      this.visible = false
      this.setLocalStorage()
      this.$nextTick(() => {
        this.$emit('change', this.boxInfo)
      })
    },
    getLocalStorage() {
      const box_info = localStorage.getItem('box_info')
      if (box_info) {
        this.boxInfo = boxInfo
      } else {
        this.boxInfo = {
          title: '智捷元港',
          desc: '',
          mdcAra: '',
          mdcEn: 'MADE IN CHINA',
          ytm: 'J H P'
        }
      }
    },
    setLocalStorage() {
      localStorage.setItem('box_info', this.boxInfo)
    }
  }
}
</script>
